<template>
	<!-- 我的订单 -->
	<view class="order-main">
		<!-- 订单搜索 -->
		<view class="order-search">
			<view class="searchPage-input">
				<uni-search-bar
					radius="50"
					style="flex: 1"
					placeholder="搜索我的订单号、订单名称"
					clearButton="always"
					cancelButton="none"
					@confirm="search"
					@cancel="search"
					@clear="search"
					v-model="queryData.keyword"
				/>
				<text class="searchPage-title" @click="search">搜索</text>
			</view>

			<!-- 订单筛选 -->
			<uni-segmented-control
				style="background-color: #fff; height: 90rpx;"
				:current="current"
				:values="items"
				active-color="#dd524d"
				@clickItem="onClickItem"
				style-type="text"
			/>
		</view>

		<view style="height: 90px"></view>
		<!-- 订单列表 -->
		<view class="orderList">
			<view class="order-item" v-if="orderListData.length > 0">
				<hwxcOrderZf v-for="(item, index) in orderListData" :key="item.id" :orderInfo="item" @refreshOrderList="getRefreshOrderList" />
			</view>

			<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" v-else></u-empty>
		</view>
	</view>
</template>

<script>
import hwxcOrderZf from '../../components/hwxcOrderZf/hwxcOrderZf.vue';
import { userOrderList } from '../../api/order/index.js';
export default {
	data() {
		return {
			items: ['全部', '待付款', '待发货', '待收货', '已完成', '退货/退款'],
			current: 0,
			// 订单数据
			orderListData: [],
			queryData: {
				type: '',
				keyword: ''
			}
		};
	},

	components: {
		hwxcOrderZf
	},

	async onLoad(option) {
		const { id } = option;
		this.current = Number(id);
	},

	async onShow() {
		await this.getUserOrderList();
	},

	methods: {
		async getUserOrderList() {
			try {
				const query = {
					type: this.current
				};
				if (this.queryData.keyword) {
					query.keyword = this.queryData.keyword;
				}
				const resData = await userOrderList(query);
				this.orderListData = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		search() {
			this.getUserOrderList();
		},

		onClickItem(val) {
			this.current = val.currentIndex;
			this.getUserOrderList();
		},

		// 刷新
		async getRefreshOrderList() {
			await this.getUserOrderList();
		}
	}
};
</script>

<style scoped lang="scss">
.order-main {
	.order-search {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 999;
		background-color: #f3f3f3;
	}
	.searchPage-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: #fff;
		.searchPage-title {
			margin-right: 20rpx;
			color: #444;
		}
	}
	.orderList {
		box-sizing: border-box;
		padding: 20rpx;
		padding-top: 5px;
	}
}
</style>

<style>
	.segmented-control__text{
		font-size: 12px !important;
	}
	
	.segmented-control{
		padding: 0px 10px;
	}
</style>
